<template>
  <baseCard title="应用缺陷处理情况" :height="height">
    <VptPie
      class="box"
      :chartData="appDefect"
      :chartType="chartType"
      autoRander
      v-bind="pieProps"
      titleText="缺陷总数"
      :width="pieWidth"
      :height="pieHeight"
    ></VptPie>
  </baseCard>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptPie from "@/components/echarts/vpt-pie/index.vue";
const props = defineProps({
  height: { type: String, default: "" },
  isLandscape: { type: Boolean, default: false },
  appDefectData: { type: Array, default: [] },
  // 宽度
  pieWidth: { type: Number, default: 280 },
  // 高度
  pieHeight: { type: Number, default: 280 },
  chartType: { type: String, default: "init" },
  // chartType: { type: String, default: "" },
});
const appDefect = computed(() => {
  return props.appDefectData.map((item, index) => {
    return {
      ...item,
      value: item.total_now,
      percent: item.percent + "%",

      // percent: `${getPercentValue(
      //   props.appRequirementData.map((v) => v.value),
      //   index,
      //   1
      // )}%`,
    };
  });
});

const pieProps = computed(() => {
  const otherProps = props.isLandscape ? getOtherPieProps() : {};

  return {
    center: ["50%", "35%"],
    radius: ["38%", "50%"],
    legendProps: {
      top: "15%",
      left: "45%",
      itemGap: 10,
    },
    titleProps: {
      left: "21.3%",
      top: "35%",
    },
    color: ["#EDC600", "#2175DB", "#57C5FF", "#00B675"],
    ...otherProps,
  };
});
</script>

<style scoped>
.box {
  margin-top: 0.2rem;
}
</style>
